import React, { Component, Fragment } from 'react';
import { Avatar } from 'antd';
import { connect } from 'react-redux';
import {Storage} from "../../util";
import {withRouter} from 'react-router-dom';
import {actionCreators} from '../auth/store';

import './style.less';

class User extends Component {

  render() {
    return (
      <div className="pinlor-user-wrapper">
        {
          this.props.showAvatar
            ? (
              <Fragment>
                <Avatar icon="user" />
                <p>李昂</p>
                <a onClick={this.logout}>退出</a>
              </Fragment>
            ) : (
              <a onClick={this.logout}>登录</a>
            )
        }
      </div>
    )
  }
  logout = ()=>{
    Storage.removeKey('token');
    this.props.setLoginStatus(false);
    this.props.history.push('/login');
  };
}

const mapStateToProps = state => ({
  showAvatar: state.auth.loginState
});

const mapDispatchToProps = dispatch => ({
  setLoginStatus(status){
    dispatch(actionCreators.setLoginStatus(status));
  }
});

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(User));


